<template>
    <div class="myAdress">
        <van-nav-bar title="我的收货地址" left-text="返回" left-arrow @click-left="handleBack" @click-right="handleAddAdress" />
        <van-address-list v-model="chosenAddressId" :list="list" :disabled-list="disabledList"
            disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
        <van-dialog v-model="showChangeDialog" title="标题">
            <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default
                show-search-result :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" />
        </van-dialog>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { changeAddress, getAddressList, delAddress } from "@/api/reception"
export default {

    data() {
        return {
            showChangeDialog: false,
            areaList,
            searchResult: [

            ],
            addressInfo: {
                "name": "张三",
                "tel": "13000000000",
                "country": "",
                "province": "河北省",
                "city": "石家庄市",
                "county": "长安区",
                "areaCode": "130102",
                "postalCode": "",
                "addressDetail": "杭州市西湖区 黄龙万科中心",
                "isDefault": true,
                "id": "1",
                "address": "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
            },
            show: true,
            chosenAddressId: '1',
            list: [

            ],
            disabledList: [
                // {
                //     id: '3',
                //     name: '王五',
                //     tel: '1320000000',
                //     address: '浙江省杭州市滨江区江南大道 15 号',
                // },
            ],
        };


    },

    mounted() {
        this.getAddressList()

    },

    methods: {
        async getAddressList() {
            const res = await getAddressList()
            this.list = res.data.map(item => {
                return {
                    ...item,
                    isDefault: item.isDefault == '0' ? true : false
                }
            })
        },
        handleBack() {
            this.$router.back();
        },
        handleAddAdress() {

        },
        async onSave(v) {
            v.address = v.province + v.city + v.county + v.addressDetail;
            v.isDefault = v.isDefault ? '0' : '1';
            console.log(v);

            const res = await changeAddress(v);
            if (res.code == 200) {
                this.showChangeDialog = false;
                this.getAddressList()
                if (v.id) {
                    Toast('修改成功！');

                } else {
                    Toast('新增成功！');
                }
            }
        },
        async onDelete(v) {
            let data = {
                id: v.id
            }
            const res = await delAddress(data)
            if (res.code == 200) {
                this.showChangeDialog = false;
                this.getAddressList()
                Toast('删除成功！');
            }
        },
        onChangeDetail(val) {

        },
        onAdd() {
            this.showChangeDialog = true;
            this.addressInfo = {}
        },
        onEdit(v) {
            this.showChangeDialog = true;
            this.addressInfo = v
        }
    },
};
</script>
<style scoped lang="less">
.myAdress {
    height: 100%;
}
</style>